<template>
  <div class="echartsBox" style="page-break-inside:avoid;">
    <ReportEcharts :option="option" :imgList="respImg" :bigFontFlag="props.bigFontFlag" :id="id"/>
  </div>
</template>

<script setup lang="ts">
import {reactive, getCurrentInstance, ref, toRefs, watch} from 'vue'

interface respType {
  reportData: any,
  bigFontFlag: boolean
}

const props = defineProps<respType>()

const {proxy} = getCurrentInstance() as any
const echarts = proxy.$echarts

type EChartsOption = echarts.EChartsOption

const id = ref(('respEchatrs' + Math.random()).replace(".", ""))

interface DataType {
  respImg: Array<object>
  option: EChartsOption
}

const data = reactive<DataType>({
  respImg: [
    {
      url: 'maxResp.png',
      text: '最高呼吸率',
      value: '0（次/分钟）'
    },
    {
      url: 'lowResp.png',
      text: '最低呼吸率',
      value: '0（次/分钟）'
    },
    {
      url: 'avgResp.png',
      text: '平均呼吸率',
      value: '0（次/分钟）'
    }
  ],
  option: {
    grid: {
      left: '5%',
      right: '8%',
      bottom: '10%',
      top: '2%',
      containLabel: true
    },
    dataZoom: [
      {
        type: 'inside',
        realtime: true,
        start: 0,
        end: 100,
        show: false
      },
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [],
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value'
    },
    legend: {
      data: ['呼吸'],
      left: 'center',
      top: 'bottom',
      icon: 'rect',
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        fontSize: (props.bigFontFlag ? "18px" : "")
      },
    },
    series: [
      {
        name: '呼吸',
        data: [], //呼吸值
        type: 'line',
        symbol: 'none', //不要折点
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            {
              offset: 0,
              color: 'rgba(0, 180, 42, 0)'
            },
            {
              offset: 1,
              color: 'rgba(0, 180, 42, 0.2)'
            }
          ])
        },
        // //折线颜色
        // lineStyle: {
        //   color: 'rgba(0, 180, 42, 1)'
        // },
        //折点颜色
        itemStyle: {
          color: 'rgba(0, 180, 42, 1)'
        },
        markLine: {
          silent: true,
          data: [
            {
              yAxis: 5,
              symbol: 'none',
              label: {
                fontSize: '10px',
                color: 'rgba(75, 0, 130, 1)',
                formatter: '{c}次/分钟'
              },
              lineStyle: {
                color: 'rgba(75, 0, 130, 1)',
              },
            },
            {
              yAxis: 10,
              symbol: 'none',
              label: {
                fontSize: '10px',
                color: 'rgba(252, 125, 2, 1)',
                formatter: '{c}次/分钟'
              },
              lineStyle: {
                color: 'rgba(252, 125, 2, 1)',
              },
            },
            {
              yAxis: 23,
              symbol: 'none',
              label: {
                fontSize: '10px',
                color: 'rgba(253, 1, 0, 1)',
                formatter: '{c}次/分钟'
              },
              lineStyle: {
                color: 'rgba(253, 1, 0, 1)',
              },
            },
          ]
        }
      }
    ],
    visualMap: {
      show: false,
      pieces: [
        {
          gt: 0,
          lte: 5,
          color: 'rgba(75, 0, 130, 1)'
        },
        {
          gt: 5,
          lt: 10,
          color: 'rgba(252, 125, 2, 1)'
        },
        {
          gte: 10,
          lte: 23,
          color: 'rgba(0, 180, 42, 1)'
        },
        {
          gt: 23,
          color: 'rgba(253, 1, 0, 1)'
        }
      ],
      outOfRange: {
        color: 'rgba(153, 153, 153, 1)'
      }
    },
  }
})
const {respImg, option} = toRefs(data)
const setData = (obj : any) => {
  //呼吸率
  const {abscissa, breathRateAxis, highestBreathRate, lowestBreathRate, avgBreathRate} = obj || {}
  respImg.value = [
    {
      url: 'maxResp.png',
      text: '最高呼吸率',
      value: (highestBreathRate ? highestBreathRate : '-') + '（次/分钟）'
    },
    {
      url: 'lowResp.png',
      text: '最低呼吸率',
      value: (lowestBreathRate ? lowestBreathRate : '-') + '（次/分钟）'
    },
    {
      url: 'avgResp.png',
      text: '平均呼吸率',
      value: (avgBreathRate ? avgBreathRate : '-') + '（次/分钟）'
    }
  ]
  option.value.xAxis.data = abscissa || []
  option.value.series[0].data = breathRateAxis || []
}

setData(props.reportData);
//监听reportData变化
watch(
  () => props.reportData,
  (newValue) => {
    setData(newValue);
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="less"></style>
